<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <!-- 引入bootstarp -->
    <script type="text/javascript" src="../js/bootstrap3/js/bootstrap.js"></script>
    <link rel="stylesheet" href="../js/bootstrap3/css/bootstrap.css">
    <!-- 引入bootstrap table的css、js -->
    <link type="text/css" rel="stylesheet" href="../js/bootstrap-table/bootstrap-table.css">
    <script type="text/javascript" src="../js/bootstrap-table/bootstrap-table.js"></script>
    <script type="text/javascript" src="../js/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
    <!-- 引入bootstrap datetime的css、js -->
    <link type="text/css" rel="stylesheet" href="../js/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css">
    <script type="text/javascript" src="../js/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
    <script type="text/javascript" src="../js/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
    <!-- bootstrap 弹框 -->
    <script src="../js/bootstrap-bootbox/bootbox.js"></script>
</head>
<body>
<form class="form-inline">
    <div class="form-group">
        <label for="username">
            <font color="red">商品名称</font>
        </label>
        <input type="text" class="form-control" id="ProductName" placeholder="请输入用户名">

    </div>
    <button type="button" class="btn btn-primary glyphicon glyphicon-search" onclick="searchUser()">搜索</button>

</form>
<table class="table" id="ShopProductTable"></table>
</body>
<script>
    $(function () {
        tables();

    })
    /**
    **条查
    * */
    function searchUser() {
        $("#ShopProductTable").bootstrapTable('refresh');
    }
    /**
     * 初始化页面加载所有用户店铺商品信息
     */
    function tables(){

        $("#ShopProductTable").bootstrapTable({
            url:'../user/findShopProductList',
            type:'post',
            pagination:true, //开启分页
            //pageList:[1, 5, 10, 15,50],//分页组件
            pageNumber:1,
            pageSize:10,//默认每页条数
            sidePagination:'server',//分页方式：client客户端分页，server服务端分页
            striped:true,//条纹表格
            clickToSelect: true,
            queryParams:function(){
                return {
                    page:this.pageNumber,
                    rows:this.pageSize,
                    ProductName:$("#ProductName").val()
                };
            },
            columns:[
                {checkbox:true},
                {field:'id',title:'商品id',width:80},
                {field:'productName',title:'商品名称',width:80},
                {field:'productImg',title:'商品图片',width:80,formatter:function(value,row,index){
                        return "<img src='"+value+"' width='50px' height='50px'/>";
                    }},
                {field:'productPrice',title:'商品价格',width:80},
                {field:'userName',title:'卖家昵称',width:80},
                {field:'storeName',title:'店铺名称',width:80},
                {field:'productState',title:'商品状态',width:80,formatter:function (value,row,index) {
                        if (value == 1){
                            return "<font color='green'>上架</font>"
                        }if (value == 2){
                            return "<font color='blue'>下架</font>"
                        }if (value == 3){
                            return "<font color='red'>审核中</font>"
                        }
                    }},
                {field:'aww',title:'操作',width:80,formatter:function(value,row,index){
                        var str='';
                            str+= '<a href="javascript:pizhun('+row.id+',1)">批准</a> | ';
                            str+= '<a href="javascript:pizhun('+row.id+',2)">不批准</a>  ';
                        return str;
                    }}
            ],
        })
    }


    /**
     * 批准
     */
    function pizhun(id,falg) {
        $.post('../user/pizhun',{id:id,falg:falg},function(data){
            if(data){
                searchUser();
            }else{
                bootbox.alert({
                    message:'操作失败',
                    size:'small'
                })
            }
        })
    }



</script>
</html>